<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑帖子</title>
  <link rel="stylesheet" href="./../../css/bootstrap.css">
  <style>
    .blog-img{
      width: 100px;
    }
  </style>
  <script src="./../../js/jq.js"></script>
  <script src="./../../js/bootstrap.js"></script>
  <script>
      let blogId = getQueryString('blogId')

    function getQueryString(name) {
        const URL = new URLSearchParams(window.location.search)
        let val = URL.get(name)
        return val
    }

    function getBlog(blogId) {
        $.getJSON("http://localhost:8081/weibo/blog/one/" + blogId, function (res) {
            console.log(res)
            const blog = res.data
            $("#blogId").val(blog.blogId)
            $("#user").val(blog.user.nickname)
            $("#content").val(blog.content)
            $("#createdTime").val(blog.createdTime)
            let imgshtml = "";
            $("#imglist").empty()
            blog.imgs.forEach(img => {
                imgshtml += `<li class="list-group-item">
                        <img class="blog-img" src="http://127.0.0.1:8081/weibo/${img.url}"/>
                        <button  type="button" class="btn btn-danger" onclick="delImg(${img.imgId},this)">删除</button>
                    </li>`;
            });
            $("#imglist").append(imgshtml)
        })
    }

    function delImg(imgId,elem){
          alert(imgId)
        $.post("http://localhost:8081/weibo/admin/blog/deleteBlogImg",{
            imgId:imgId
        },function (res){
            if(res.code == 200){
                alert("删除图片成功")
                $(elem).parents(".list-group-item").remove()
            }
        })
    }

    function updateSave(){
        const content = $("#content").val()
        $.post("http://localhost:8081/weibo/admin/blog/update",{
            blogId:blogId,
            content:content
        },function (res){
            if(res.code == 200){
                alert("修改成功")
            }else{
                alert("修改失败")
            }
        })
    }

    $(function () {
        // 处理blogId，例如在控制台输出或在页面上显示
        console.log('blogId:', blogId);
        // alert(blogId)
        getBlog(blogId)
    })


  </script>
</head>
<body>
    <table class="table">
        <caption>编辑帖子</caption>
        <tr>
            <th>发帖时间</th>
            <td>
                <input disabled id="createdTime"/>
            </td>
            <th>博客id</th>
            <td>
                <input disabled readonly id="blogId"/>
            </td>
            <th>发帖人</th>
            <td>
                <input disabled readonly id="user"/>
            </td>
        </tr>

        <tr>
            <th>内容</th>
            <td colspan="5">
                <textarea id="content" cols="30" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <button class="btn btn-info" onclick="updateSave()">保存</button>
            </td>
        </tr>
    </table>
    <h3>图片列表</h3>
    <ul class="list-group" id="imglist">
        <li class="list-group-item">
            <img class="blog-img" src="http://127.0.0.1:8081/weibo/users/3.jpg"/>
            <button  type="button" class="btn btn-danger">删除</button>
        </li>
        <li class="list-group-item">
            <img class="blog-img" src="http://127.0.0.1:8081/weibo/users/3.jpg"/>
            <button  type="button" class="btn btn-danger">删除</button>
        </li>
    </ul>
</body>
</html>